<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="menu">
    <!-- 添加管理员的请求方式为post    enctype="multipart/form-data"-->
    <form method="post" id="addEquipment"
          enctype="multipart/form-data">
        <!-- 模态框Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
             tabindex="-1" id="insertEquipmentModal" class="modal fade">
            <!-- 设置请求方式为method     类型 enctype="multipart/form-data"  -->
            <div class="modal-dialog">
                <div class="modal-content" style="margin-top: 20px;">
                    <div>
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true">&times;
                        </button>
                        <h3 style="text-align: center">添加器材</h3>
                    </div>

                    <div class="modal-body">
                        <p>器材名称：</p>
                        <input type="text" name="name" placeholder="请输入器材名称"
                               autocomplete="off" class="form-control placeholder-no-fix">
                    </div>

                    <div class="modal-body">
                        <p>器材总个数：</p>
                        <input type="text" name="totalNums" placeholder="请输入器材总个数"
                               autocomplete="off" class="form-control placeholder-no-fix">
                    </div>
                    <div class="modal-body">
                        <p>器材借出个数：</p>
                        <input type="text" name="rentNums" placeholder="请输入器材借出个数"
                               autocomplete="off" class="form-control placeholder-no-fix">
                    </div>
                    <div class="modal-body">
                        <p>器材类别：</p>
                        <input type="text" name="typeName" placeholder="请输入器材类别"
                               autocomplete="off" class="form-control placeholder-no-fix">
                    </div>

                    <div class="modal-body">
                        <p>器材状态：</p>
                        <input type="text" name="statusStr" placeholder="请输入器材状态"
                               autocomplete="off" class="form-control placeholder-no-fix">
                    </div>

                    <div style="text-align: center;margin-bottom: 20px;">
                        <button class="btn btn-theme" type="button" onclick="doAddEquipment()">添加账户</button>
                        <button data-dismiss="modal" style="color: blue;" class="btn btn-default" type="button">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- 添加管理员的请求方式为post    enctype="multipart/form-data"-->

    <!--开始：注册表单的处理方法-->
    <script>
        function doAddEquipment() {
            //1、获取注册表单所需要提交的数据
            var data = new FormData(document.getElementById('addEquipment'));
            console.log(data);
            //2、通过ajax函数提交异步请求 ajax() post() get()
            $.ajax({
                url:'addEquipment',//请求路径
                type:'post',//请求方式
                data:data,//入参数据
                //对于文件传输设置的属性键值对
                cache:false,//缓存判断
                processData:false,//
                contentType:false,//

                //3、请求成功之后，根据响应的结果来进行操作处理（注册失败/注册成功）
                success:function (result) {//连接成功
                    if (result.isok == true) {//注册成功
                        alert("成功添加一种器材");
                        location.reload();
                    } else {//注册失败
                        alert(result.errMessage);
                    }
                },
                error:function () {//连接失败
                    alert("系统繁忙，添加器材失败");
                }
            });


        }
    </script>
    <!--结束：注册表单的处理方法-->

</div>

</html>